<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>可调节的多条进度条</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 1000px;
        margin: 0 auto;
        padding: 20px;
      }

      .progress-bars-container {
        margin-bottom: 30px;
      }

      .progress-bar {
        margin-bottom: 20px;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
      }

      .progress-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
      }

      .progress-title {
        font-weight: bold;
      }

      .delete-btn {
        background-color: #ff4d4d;
        color: white;
        border: none;
        padding: 3px 8px;
        border-radius: 3px;
        cursor: pointer;
      }

      .time-slots {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
        margin-bottom: 10px;
      }

      .time-slot {
        width: 20px;
        height: 30px;
        background-color: #e0e0e0;
        cursor: pointer;
        position: relative;
      }

      .time-slot.selected {
        background-color: #4caf50;
      }

      .time-slot.disabled {
        background-color: #ff9999;
        cursor: not-allowed;
      }

      .time-slot:hover:not(.selected):not(.disabled) {
        background-color: #b3b3b3;
      }

      .time-labels {
        display: flex;
        justify-content: space-between;
        width: 100%;
        font-size: 12px;
        color: #666;
      }

      .add-btn {
        background-color: #4caf50;
        color: white;
        border: none;
        padding: 8px 16px;
        border-radius: 4px;
        cursor: pointer;
        margin-bottom: 20px;
      }

      .notification {
        position: fixed;
        top: 20px;
        right: 20px;
        background-color: #ff4d4d;
        color: white;
        padding: 10px 20px;
        border-radius: 4px;
        display: none;
      }
    </style>
  </head>
  <body>
    <h1>多条进度条时间选择器</h1>

    <button id="addProgressBar" class="add-btn">添加进度条</button>

    <div id="progressBarsContainer" class="progress-bars-container"></div>

    <div id="notification" class="notification">时间节点已被其他进度条占用！</div>

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        const progressBarsContainer = document.getElementById('progressBarsContainer')
        const addProgressBarBtn = document.getElementById('addProgressBar')
        const notification = document.getElementById('notification')

        // 所有时间节点的占用情况，key为时间节点索引，value为进度条ID
        const occupiedSlots = {}
        let progressBarCount = 0

        // 生成时间标签（00:00 - 23:30，每半小时一个）
        function generateTimeLabels() {
          const labels = []
          for (let i = 0; i < 24; i++) {
            const hour = i.toString().padStart(2, '0')
            labels.push(`${hour}:00`)
            if (i < 23) {
              labels.push(`${hour}:30`)
            }
          }
          return labels
        }

        // 创建进度条
        function createProgressBar() {
          progressBarCount++
          const progressBarId = `progress-bar-${progressBarCount}`

          const progressBar = document.createElement('div')
          progressBar.className = 'progress-bar'
          progressBar.id = progressBarId

          // 进度条头部（标题和删除按钮）
          const progressHeader = document.createElement('div')
          progressHeader.className = 'progress-header'

          const progressTitle = document.createElement('div')
          progressTitle.className = 'progress-title'
          progressTitle.textContent = `进度条 ${progressBarCount}`

          const deleteBtn = document.createElement('button')
          deleteBtn.className = 'delete-btn'
          deleteBtn.textContent = '删除'
          deleteBtn.addEventListener('click', function () {
            // 删除前释放所有占用的时间节点
            const selectedSlots = progressBar.querySelectorAll('.time-slot.selected')
            selectedSlots.forEach(slot => {
              const slotIndex = slot.dataset.index
              delete occupiedSlots[slotIndex]
            })

            progressBar.remove()
            updateAllProgressBars()
          })

          progressHeader.appendChild(progressTitle)
          progressHeader.appendChild(deleteBtn)

          // 时间节点容器
          const timeSlotsContainer = document.createElement('div')
          timeSlotsContainer.className = 'time-slots'

          // 创建48个时间节点（每半小时一个）
          for (let i = 0; i < 48; i++) {
            const timeSlot = document.createElement('div')
            timeSlot.className = 'time-slot'
            timeSlot.dataset.index = i

            timeSlot.addEventListener('click', function () {
              handleTimeSlotClick(progressBarId, i)
            })

            timeSlotsContainer.appendChild(timeSlot)
          }

          // 时间标签
          const timeLabelsContainer = document.createElement('div')
          timeLabelsContainer.className = 'time-labels'

          const timeLabels = generateTimeLabels()
          // 只显示部分标签以避免拥挤
          for (let i = 0; i < 48; i += 4) {
            const label = document.createElement('div')
            label.textContent = timeLabels[i]
            timeLabelsContainer.appendChild(label)
          }

          progressBar.appendChild(progressHeader)
          progressBar.appendChild(timeSlotsContainer)
          progressBar.appendChild(timeLabelsContainer)

          progressBarsContainer.appendChild(progressBar)

          return progressBarId
        }

        // 处理时间节点点击
        function handleTimeSlotClick(progressBarId, slotIndex) {
          const progressBar = document.getElementById(progressBarId)
          const timeSlot = progressBar.querySelector(`.time-slot[data-index="${slotIndex}"]`)

          // 如果已经被其他进度条占用
          if (occupiedSlots[slotIndex] && occupiedSlots[slotIndex] !== progressBarId) {
            showNotification()
            return
          }

          // 切换选中状态
          if (timeSlot.classList.contains('selected')) {
            timeSlot.classList.remove('selected')
            delete occupiedSlots[slotIndex]
          } else {
            timeSlot.classList.add('selected')
            occupiedSlots[slotIndex] = progressBarId
          }

          // 更新所有进度条的禁用状态
          updateAllProgressBars()
        }

        // 更新所有进度条的禁用状态
        function updateAllProgressBars() {
          const allProgressBars = document.querySelectorAll('.progress-bar')

          allProgressBars.forEach(bar => {
            const barId = bar.id
            const timeSlots = bar.querySelectorAll('.time-slot')

            timeSlots.forEach(slot => {
              const slotIndex = slot.dataset.index

              // 重置禁用状态
              slot.classList.remove('disabled')

              // 如果被其他进度条占用且不是当前进度条选中的
              if (occupiedSlots[slotIndex] && occupiedSlots[slotIndex] !== barId) {
                slot.classList.add('disabled')
              }
            })
          })
        }

        // 显示通知
        function showNotification() {
          notification.style.display = 'block'
          setTimeout(() => {
            notification.style.display = 'none'
          }, 2000)
        }

        // 添加进度条按钮点击事件
        addProgressBarBtn.addEventListener('click', createProgressBar)

        // 初始创建一个进度条
        createProgressBar()
      })
    </script>
  </body>
</html>
